<!-- 培训总览 -->
<template>
  <px-dialog v-model="visible" title="培训总览" width="80%" @close="cancel">
    <div>学员人数：{{ tableData.length }}</div>
    <div v-loading="loading" class="overview-container">
      <div class="chart-container">
        <div ref="chartRef" class="chart-ref" />
      </div>
      <div class="table-container">
        <px-table height="500" :data="tableData" size="small" border class="common-table">
          <px-table-column type="index" fixed width="55" align="center" />
          <px-table-column prop="name" label="姓名" min-width="120" show-overflow-tooltip />
          <px-table-column prop="workNo" label="工号" min-width="120" show-overflow-tooltip />
          <px-table-column prop="stateName" label="状态" min-width="120" show-overflow-tooltip />
          <px-table-column prop="completeTime" label="完成时间" min-width="120" show-overflow-tooltip />
        </px-table>
      </div>
    </div>
  </px-dialog>
</template>

<script setup>
import { computed, ref, reactive, toRefs, onMounted, onUnmounted, nextTick } from "vue";
import * as echarts from "echarts";
import { getOverViewListAPI } from "@/api/knowledge/train";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
});
const emits = defineEmits(["update:visible"]);

const visible = computed({
  get: () => props.visible,
  set: val => emits("update:visible", val)
});

const chartRef = ref();

const state = reactive({
  loading: false,
  pieData: [],
  tableData: []
});
const { loading, tableData } = toRefs(state);

onMounted(() => {
  handleQuery();
});

// 查询
const handleQuery = async () => {
  try {
    state.loading = true;
    const params = {
      trainId: props.rowData.id
    };
    const res = await getOverViewListAPI(params);
    state.tableData = res.trainees;
    const data = res.trainees;
    let N = data.filter(v => v.state === "N").length;
    let S = data.filter(v => v.state === "S").length;
    let E = data.filter(v => v.state === "E").length;
    let P = data.filter(v => v.state === "P").length;
    let C = data.filter(v => v.state === "C").length;
    let arr = [
      { value: N, name: "未开始" },
      { value: S, name: "学习中" },
      { value: E, name: "待考试" },
      { value: P, name: "考试通过" },
      { value: C, name: "已完成" }
    ];
    state.pieData = arr;
    nextTick(() => {
      initChart();
    });
  } catch (err) {
    console.log(err);
  } finally {
    state.loading = false;
  }
};

let chartInstance = null;
const initChart = () => {
  if (chartRef.value) {
    chartInstance = echarts.init(chartRef.value);
    let option = {
      tooltip: {
        trigger: "item"
      },
      legend: {
        top: "5%",
        left: "center"
      },
      series: [
        {
          name: "培训状态",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center"
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: "bold"
            }
          },
          labelLine: {
            show: false
          },
          data: state.pieData
        }
      ]
    };
    nextTick(() => {
      chartInstance.setOption(option);
    });
  }
};

const cancel = () => {
  emits("update:visible", false);
};

onUnmounted(() => {
  chartInstance && chartInstance.dispose();
});
</script>

<style lang="scss" scoped>
@import url("@/views/all/knowledge/trainManage/scss/common.scss");

.overview-container {
  display: flex;
  align-items: center;

  .chart-container {
    width: 400px;
    height: 400px;
    margin-right: 16px;

    .chart-ref {
      width: 100%;
      height: 100%;
    }
  }

  .table-container {
    flex: 1;
  }
}
</style>
